<template>
	<view class="content">
		<view>
			<!-- <el-form></el-form> -->
			<!-- 头像区域 -->
			<view class="avatarContent">
				<image class="user_bg" :src="avatar"></image>
				<view class="avatarBox">
					<view class="user_info">
						<image class="avatar" :src="avatar"></image>
						<view class="username">{{username}}</view>
					</view>
				</view>
			</view>
			<!-- 列表页面 -->
			<view class="contentBox">
				<view class="orderBox">
					<view class="orderName">
						我的订单<u-icon class="orderIcon" name="order"></u-icon>
					</view>
				</view>
				<view class="listBox">
					<view class="list" data-index="0" @click="goToOrder">
						<view class="iconfont icon-quanbu"></view>全部
					</view>
					<view class="list" data-index="2" @click="goToOrder">
						<view class="iconfont icon-daijieshou"></view>接收
					</view>
					<view class="list" data-index="3" @click="goToOrder">
						<view class="iconfont icon-peixunjihua"></view>进行
					</view>
					<view class="list" data-index="4" @click="goToOrder">
						<view class="iconfont icon-yiwancheng"></view>完成
					</view>
					<view class="list" data-index="5" @click="goToOrder">
						<view class="iconfont icon-yichexiao"></view>撤销/评价
					</view>
				</view>

				<!-- 单项列表页 -->
				<view class="listContent">
					<tui-list-view color="#777">
						<tui-list-cell class="listItem" arrow @click="callSomeone">
							联系我们
						</tui-list-cell>
						<tui-list-cell class="listItem" arrow @click="goToFeedback">
							意见反馈
						</tui-list-cell>
						<tui-list-cell class="listItem" arrow @click="toCreateBUsinessCard">
							我的名片
						</tui-list-cell>
						<tui-list-cell class="listItem" arrow>
							关于我们
						</tui-list-cell>
						<tui-list-cell class="listItem" @touchstart="setFlag1" @touchmove="setFlag2" @click="shareMessage" arrow>
							<button class="shareBtn" :class="shareFlag==true?'shareBtn1':''" hover-class="shareBtnHover" open-type="share">分享给好友</button>
						</tui-list-cell>
						<tui-list-cell class="listItem" arrow @click="toFollowPage">
							关注我们公众号
						</tui-list-cell>
					</tui-list-view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				shareFlag:false,
				//头像
				avatar: '',
				//名称
				username: '',
				//用户信息
				userInfo: [],
				openId:'',
				dataList: [{
					name: "order",
					size: 30
				}]
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow(){
			// this.userInfo = uni.getStorageSync('dataInfo');
			// console.log(this.userInfo);
			// this.avatar = this.userInfo.avatarUrl;
			// this.username = this.userInfo.nickName;
		},
		
		/*
		 * uniapp微信小程序分享页面到微信好友
		*/
		onShareAppMessage() {
		    return {
		      title: `分享朋友：${this.summary}`,
		      imageUrl: this.logoUrl,
		      success: function (res) {
		        console.log("success22:" + JSON.stringify(res));
		      },
		      fail: function (err) {
		        console.log("fail22:" + JSON.stringify(err));
		      },
		    };
		},
		 
		/*
		 * uniapp微信小程序分享页面到微信朋友圈
		*/
		onShareTimeline() {
		    return {
		      title: `分享朋友：${this.summary}`,
		      imageUrl: this.logoUrl,
		      success: function (res) {
		        console.log("success22:" + JSON.stringify(res));
		      },
		      fail: function (err) {
		        console.log("fail22:" + JSON.stringify(err));
		      },
		    };
		},
		methods: {
			//关注公众号
			toFollowPage(){
				uni.navigateTo({
					url:'../createBusinessCard/followUs/followUs'
				})
			},
			//前往生成名片页面
			toCreateBUsinessCard(){
				uni.navigateTo({
					url:'../createBusinessCard/createBusinessCard'
				})
			},
			setFlag1(){
				this.shareFlag=true;
			},
			setFlag2(){
				this.shareFlag=false;
			},
			shareMessage() {
				this.shareFlag=false;
				console.log('分享')
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 1,
				    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			// 获取登录信息
			getUserInfo(){
				let that = this;
				that.openId=uni.getStorageSync('openId');
				//获取用户信息
				uni.request({
					url: 'https://zioncloud.top/repair/user/getUserProfile',
					headers: {
						'Content-Type': 'application/json'
					},
					method: 'POST',
					data: {
						openId: that.openId,
					},
					success(res) {
						//保存当前用户的所有信息
						console.log('头像：');
						console.log(res);
						that.avatar = res.data.data.userProfile.avatarUrl;
						that.username = res.data.data.userProfile.nickName;
					},
					fail(err) {
						console.log(err);
					}
				})
				
			},
			//前往反馈页面
			goToFeedback(e) {
				uni.navigateTo({
					url: "../feedback/feedback"
				})
			},
			//呼叫客服
			callSomeone() {
				uni.makePhoneCall({
					phoneNumber: '07503321655' //仅为示例
				});
			},
			//前往订单列表
			goToOrder(e) {
				console.log(e)
				let status = e.currentTarget.dataset.index;
				console.log(status);
				console.log('上面是状态信息：')
				uni.navigateTo({
					url: "../order/order?status=" + status
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #eef;
	}

	.avatarContent {
		width: 100%;
		height: 50vh;
		overflow: hidden;
		position: relative;
	}

	.user_bg {
		position: absolute;
		width: 100%;
		height: 50vh;
		filter: blur(6rpx);
	}

	.avatarBox {
		position: relative;
		width: 100%;
		height: 50vh;
	}

	.user_info {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 20%;
		text-align: center;
	}

	.avatar {
		width: 220rpx;
		height: 220rpx;
		border-radius: 50%;
	}

	.username {
		color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;

	}

	/* 内容 */
	.contentBox {
		position: relative;
		top: -90rpx;
		border-radius: 20rpx;
		background-color: #eef;
		width: 100%;
		height: 780rpx;
	}

	.orderBox {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-bottom: 1rpx solid #ddd;
		margin-bottom: 15rpx;
	}

	,
	.orderIcon {
		font-size: 42rpx;
		line-height: 80rpx;
		margin-left: 15rpx;
	}

	.orderName {
		font-size: 34rpx;
		line-height: 80rpx;
	}

	/*订单状态*/
	.listBox {
		padding-rop: 20rpx;
		display: flex;
		width: 95%;
	}

	.list {
		width: 20%;
		font-size: 26rpx;
		text-align: center;
	}

	.listContent {
		padding: 30rpx;
		margin-top: 20rpx;
	}
	.shareBtn{
		border:none;
		border: #FFF solid 1rpx!important;
		background-color: #fff;
		font-size: 28rpx;
		height:50rpx;
		line-height: 50rpx;
		width:98%;
		text-align: left;
		margin: 0;
		padding: 0;
	}
	.listItem button::after{
		border: none;
	}
	.shareBtn1{
		background-color: #f1f1f1;
		border:1rpx solid #f1f1f1;
		/* border:1rpx solid #fbfbfb; */
	}
	
	.shareBtnHover{
		background-color: #f1f1f1;
	}
</style>
